

let $ = layui.jquery;

export default class addInfo { 
  constructor(){ 
    this.render();
    this.handle();
  }

  render() { 
    let template = `
    <div class="layui-container">
            <div class="layui-row">
              <div class="layui-col-md6">
                <form class="layui-form" lay-filter="updateForm" action="/api/info/uploadinfo" method="post" enctype="multipart/form-data" target="display_none">
                  <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                      <input
                        type="text"
                        name="title"
                        placeholder="请输入标题"
                        autocomplete="off"
                        class="layui-input"
                      />
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <label class="layui-form-label">发布时间</label>
                    <div class="layui-input-block">
                      <input
                        type="text"
                        name="date"
                        placeholder="请输入发布时间"
                        autocomplete="off"
                        class="layui-input"
                      />
                    </div>
                  </div>
                   
                  <div class="layui-form-item " style=" margin-left:120px">
                  <div style="padding-left:40px;margin-bottom:20px">
               
                    <div id="imgDiv"></div>


                    <div class="layui-form-item" >
                    <button style=" margin-left:100px"
                    id="imgBtn"
                    type="button"
                    class="layui-btn"
                    lay-filter="formDemo"
                    >
                    添加文图
                      </button>
                  </div>

                    <div class="layui-form-item comment" >
                  
                    </div>

                    <div class="layui-form-item">
                    <button style=" margin-left:100px"
                    id="comBtn"
                    type="button"
                    class="layui-btn"
                    lay-filter="formDemo"
                    >
                    添加评论
                      </button>
                    </div>

                  </form>
                  <iframe name="display_none" style="display:none"></iframe>
                </div>
                  </div>

              </div>
            </div>
          </div>
    `;

    $("#addInfo").html(template);
  }

  handle() { 
    let form = layui.form;
    let table = layui.table;

    layer.open({
      type: 1,
      area: ["650px", "500px"],
      content: $("#addInfo").html(),
      btn: ["添加", "取消"],
      btnAlign: "c",
      shade: 0.5,
      success: function () {
      let count=0;
      let cou=0
      //点击生成文段and图片
    $("#imgBtn").on("click",function(){
      count++;
      let div1="";
      for(let i=0;i<count;i++){
        div1+=`
        上传图片:  <input type="file" name="file" ><br>
            文段： <textarea name="text" cols="50" rows="10" style="margin-bottom:20px"></textarea>
        ` 
      }
     $("#imgDiv").html(div1)
    
    })
    //点击生成评论
    $("#comBtn").on("click",function(){
      cou++;
      let div2="";
      for(let i=0;i<cou;i++){
        div2+=`
        <div style="margin-bottom:20px">
        <p>评论:<br><textarea name="textarea" cols="50" rows="10"></textarea></p>  
        </div>
        ` 
      }
      $(".comment").html(div2)
    })
        form.render();
      },
      yes: function () {
        //提交from表单
        $("form").submit();
        layer.closeAll();
        form.render();
      

      },
    });
  }
}